<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>如何设置盒子的内边距</title>
		<style>
			div {
				width: 300px;
				height: 300px;
				/* border边框会撑大盒子 */
				/* padding也会撑大盒子 */
				/* 如果我们想要保证盒子跟效果图的大小保持一致
				 那么我们需要将宽度或者高度多出来的内边距或边框
				 的大小减掉*/
				/* border: 10px solid red; */
				background-color: #d9f2f3;
				/* 我们只写一个值的时候就是上下左右的意思 */
				/* padding: 10px; */
				/* padding-top: 20px;
				padding-left: 30px;
				padding-right: 40px;
				padding-bottom: 50px; */
				/* 我们写两个值的时候，第一个值代表上下，第二个值代表左右 */
				/* padding: 10px 30px; */
				/* 第一个值代表的是上，第二个值代表的是左右，第三个代表的是下 */
				/* padding:10px 20px 30px; */
				/* 我们要顺时针记忆，上右下左 */
				padding:10px 20px 30px 40px;
				
				
			}
		</style>
	</head>
	<body>
		<div>
			程序员的梦工厂程
			序员的梦工厂程
			程序员的梦工厂程序员的梦工厂程序员的梦工厂程序员的梦
			工厂序员的梦工厂程序员的梦工厂程序
			员的梦工厂
			程序员的梦工厂程
			序员的梦工厂程
			程序员的梦工厂程序员的梦工厂程序员的梦工厂程序员的梦
			工厂序员的梦工厂程序员的梦工厂程序
			员的梦工厂
		</div>
	</body>
</html>